<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PakePlus - 轻量级跨平台应用打包工具</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #2d3748;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6b46c1 0%, #553c9a 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .platform-icon {
            transition: all 0.3s ease;
        }
        .platform-icon:hover {
            transform: scale(1.2);
        }
        .code-block {
            background-color: #2d3748;
            color: #f7fafc;
            border-radius: 0.5rem;
        }
        .highlight-text {
            position: relative;
            z-index: 1;
        }
        .highlight-text::after {
            content: '';
            position: absolute;
            bottom: 0.1em;
            left: 0;
            width: 100%;
            height: 0.4em;
            background-color: rgba(104, 211, 145, 0.4);
            z-index: -1;
            transform: scaleX(1.05);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">PakePlus</h1>
                    <h2 class="text-2xl md:text-3xl font-medium mb-6 text-purple-200">将网页瞬间变为<span class="highlight-text">原生应用</span></h2>
                    <p class="text-lg mb-8 text-purple-100 max-w-lg">基于 Tauri2 和 GitHub 的开源工具，助您快速将网页或前端项目打包为轻量级桌面和移动应用，大小仅<span class="font-bold">5MB</span>！</p>
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                        <a href="https://pakeplus.com/" class="bg-white text-purple-800 hover:bg-purple-100 font-bold py-3 px-6 rounded-lg transition duration-300 shadow-lg flex items-center justify-center">
                            <i class="fas fa-rocket mr-2"></i> 立即体验
                        </a>
                        <a href="#features" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-800 font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center">
                            <i class="fas fa-info-circle mr-2"></i> 了解更多
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative">
                        <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-300 rounded-full opacity-20"></div>
                        <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-purple-400 rounded-full opacity-20"></div>
                        <div class="relative bg-white p-6 rounded-xl shadow-2xl max-w-sm">
                            <div class="flex justify-between items-center mb-4">
                                <div class="flex space-x-2">
                                    <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
                                </div>
                                <div class="text-xs text-gray-500">PakePlus.app</div>
                            </div>
                            <div class="bg-gray-100 rounded-lg p-4 mb-4">
                                <div class="text-sm text-gray-800">
                                    <div class="font-bold mb-2">创建新项目</div>
                                    <div class="mb-2">1. 输入项目名称</div>
                                    <div class="mb-2">2. 设置目标平台</div>
                                    <div>3. 开始云端打包</div>
                                </div>
                            </div>
                            <div class="flex justify-between">
                                <div class="text-xs text-gray-500">5MB | 跨平台</div>
                                <button class="bg-purple-600 hover:bg-purple-700 text-white text-xs py-1 px-3 rounded transition duration-200">生成应用</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Platform Support -->
    <section class="py-16 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12">支持<span class="text-purple-600">全平台</span>打包</h2>
            <div class="flex flex-wrap justify-center gap-8">
                <div class="platform-icon text-center">
                    <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fab fa-windows text-4xl text-blue-500"></i>
                    </div>
                    <h3 class="font-semibold">Windows</h3>
                </div>
                <div class="platform-icon text-center">
                    <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fab fa-apple text-4xl text-gray-700"></i>
                    </div>
                    <h3 class="font-semibold">macOS</h3>
                </div>
                <div class="platform-icon text-center">
                    <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fab fa-linux text-4xl text-yellow-500"></i>
                    </div>
                    <h3 class="font-semibold">Linux</h3>
                </div>
                <div class="platform-icon text-center">
                    <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fab fa-android text-4xl text-green-500"></i>
                    </div>
                    <h3 class="font-semibold">Android</h3>
                </div>
                <div class="platform-icon text-center">
                    <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fab fa-app-store-ios text-4xl text-blue-400"></i>
                    </div>
                    <h3 class="font-semibold">iOS</h3>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-16 px-4 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-4">核心<span class="text-purple-600">功能</span>与优势</h2>
            <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">PakePlus 为开发者提供简单高效的解决方案，让网页变应用从未如此轻松</p>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-sync-alt text-purple-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">跨平台支持</h3>
                    <p class="text-gray-600">一键生成 Windows、macOS、Linux、Android、iOS 应用，同时支持 ARM 和 x64 架构，真正实现一次开发，全平台运行。</p>
                </div>
                
                <!-- Feature 2 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-bolt text-purple-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">轻量高效</h3>
                    <p class="text-gray-600">打包后应用体积小于5MB，比 Electron 小约20倍，性能提升10倍。为用户提供更快的启动速度和更流畅的体验。</p>
                </div>
                
                <!-- Feature 3 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-cloud text-purple-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">云端打包</h3>
                    <p class="text-gray-600">无需本地安装复杂开发环境，通过 GitHub Actions 实现云端打包。省去配置烦恼，随时随地创建应用。</p>
                </div>
                
                <!-- Feature 4 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-cog text-purple-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">高度可定制</h3>
                    <p class="text-gray-600">自定义应用名称（支持中文）、图标及注入 JavaScript 代码。满足个性化需求，打造专属应用体验。</p>
                </div>
                
                <!-- Feature 5 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-bug text-purple-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">调试支持</h3>
                    <p class="text-gray-600">提供开发和发布阶段的调试模式，快速定位问题，提高开发效率。不再为调试烦恼，专注于核心功能开发。</p>
                </div>
                
                <!-- Feature 6 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-wallet text-purple-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">完全免费</h3>
                    <p class="text-gray-600">开源项目，完全免费使用。无需担心授权费用，降低开发成本。社区驱动，持续更新改进。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Comparison Section -->
    <section class="py-16 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12">PakePlus vs <span class="text-purple-600">其他方案</span></h2>
            
            <div class="overflow-x-auto">
                <table class="min-w-full bg-white rounded-lg overflow-hidden">
                    <thead>
                        <tr class="bg-purple-600 text-white">
                            <th class="py-4 px-6 text-left">特性</th>
                            <th class="py-4 px-6 text-center">PakePlus</th>
                            <th class="py-4 px-6 text-center">Electron</th>
                            <th class="py-4 px-6 text-center">传统 Tauri</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        <tr>
                            <td class="py-4 px-6 font-medium">应用体积</td>
                            <td class="py-4 px-6 text-center text-green-600 font-bold">~5MB</td>
                            <td class="py-4 px-6 text-center">~100MB</td>
                            <td class="py-4 px-6 text-center">~10MB</td>
                        </tr>
                        <tr class="bg-gray-50">
                            <td class="py-4 px-6 font-medium">性能</td>
                            <td class="py-4 px-6 text-center text-green-600 font-bold">最佳</td>
                            <td class="py-4 px-6 text-center">一般</td>
                            <td class="py-4 px-6 text-center">良好</td>
                        </tr>
                        <tr>
                            <td class="py-4 px-6 font-medium">跨平台支持</td>
                            <td class="py-4 px-6 text-center text-green-600 font-bold">5大平台</td>
                            <td class="py-4 px-6 text-center">3大平台</td>
                            <td class="py-4 px-6 text-center">3大平台</td>
                        </tr>
                        <tr class="bg-gray-50">
                            <td class="py-4 px-6 font-medium">开发复杂度</td>
                            <td class="py-4 px-6 text-center text-green-600 font-bold">最简单</td>
                            <td class="py-4 px-6 text-center">复杂</td>
                            <td class="py-4 px-6 text-center">中等</td>
                        </tr>
                        <tr>
                            <td class="py-4 px-6 font-medium">本地环境需求</td>
                            <td class="py-4 px-6 text-center text-green-600 font-bold">无需</td>
                            <td class="py-4 px-6 text-center">需要</td>
                            <td class="py-4 px-6 text-center">需要</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <!-- Use Cases -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-4">适用<span class="text-purple-600">场景</span></h2>
            <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">PakePlus 适用于多种开发需求，帮助您快速实现想法</p>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Case 1 -->
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
                            <i class="fas fa-blog text-purple-600"></i>
                        </div>
                        <h3 class="text-xl font-bold">个人项目</h3>
                    </div>
                    <p class="text-gray-600 mb-4">将个人博客网站打包为桌面应用，注入 JS 屏蔽广告，提升用户体验。您的网站需要更原生的体验吗？</p>
                    <div class="flex items-center text-sm text-purple-600">
                        <i class="fas fa-check-circle mr-2"></i>
                        <span>适合个人开发者、博主</span>
                    </div>
                </div>
                
                <!-- Case 2 -->
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
                            <i class="fas fa-building text-purple-600"></i>
                        </div>
                        <h3 class="text-xl font-bold">企业内网工具</h3>
                    </div>
                    <p class="text-gray-600 mb-4">将内部管理系统转为桌面应用，限制访问权限，确保数据安全。简化员工使用流程，提高工作效率。</p>
                    <div class="flex items-center text-sm text-purple-600">
                        <i class="fas fa-check-circle mr-2"></i>
                        <span>适合企业IT部门</span>
                    </div>
                </div>
                
                <!-- Case 3 -->
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
                            <i class="fas fa-lightbulb text-purple-600"></i>
                        </div>
                        <h3 class="text-xl font-bold">快速原型开发</h3>
                    </div>
                    <p class="text-gray-600 mb-4">将 React 项目打包为移动应用，快速测试市场反馈，节省开发时间。您的项目需要快速部署到多平台吗？</p>
                    <div class="flex items-center text-sm text-purple-600">
                        <i class="fas fa-check-circle mr-2"></i>
                        <span>适合创业团队、独立开发者</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Workflow Diagram -->
    <section class="py-16 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12">工作流程<span class="text-purple-600">可视化</span></h2>
            
            <div class="bg-gray-50 p-8 rounded-xl">
                <div class="mermaid">
                    graph TD
                        A[访问 PakePlus.com] --> B[创建新项目]
                        B --> C[输入项目信息]
                        C --> D[配置 GitHub Token]
                        D --> E[开始云端打包]
                        E --> F[下载生成的应用]
                        F --> G[安装使用]
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-4">快速<span class="text-purple-600">上手指南</span></h2>
            <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">只需5步，轻松将您的网页变为原生应用</p>
            
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <!-- Step 1 -->
                <div class="p-6 border-b border-gray-200 flex items-start">
                    <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold mr-4 flex-shrink-0">1</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">访问官网并创建项目</h3>
                        <p class="text-gray-600 mb-4">访问 <a href="https://pakeplus.com" class="text-purple-600 hover:underline">https://pakeplus.com</a>，点击"创建项目"按钮。</p>
                    </div>
                </div>
                
                <!-- Step 2 -->
                <div class="p-6 border-b border-gray-200 flex items-start">
                    <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold mr-4 flex-shrink-0">2</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">输入项目信息</h3>
                        <p class="text-gray-600 mb-4">填写项目名称、应用ID、版本号及网站/静态文件URL。</p>
                        <div class="code-block p-4 mb-2">
                            <code class="text-sm">项目名称: MyAwesomeApp<br>应用ID: com.example.myapp<br>版本: 1.0.0<br>URL: https://yourwebsite.com</code>
                        </div>
                    </div>
                </div>
                
                <!-- Step 3 -->
                <div class="p-6 border-b border-gray-200 flex items-start">
                    <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold mr-4 flex-shrink-0">3</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">配置 GitHub Token</h3>
                        <p class="text-gray-600 mb-4">按照官网指南获取并配置您的 GitHub Token，用于云端打包。</p>
                    </div>
                </div>
                
                <!-- Step 4 -->
                <div class="p-6 border-b border-gray-200 flex items-start">
                    <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold mr-4 flex-shrink-0">4</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">等待打包完成</h3>
                        <p class="text-gray-600 mb-4">点击"确定"按钮，系统将在云端完成打包过程，通常只需几分钟。</p>
                    </div>
                </div>
                
                <!-- Step 5 -->
                <div class="p-6 flex items-start">
                    <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold mr-4 flex-shrink-0">5</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">下载并安装应用</h3>
                        <p class="text-gray-600 mb-4">下载生成的应用文件并安装。macOS用户可能需要运行以下命令：</p>
                        <div class="code-block p-4">
                            <code class="text-sm">sudo xattr -r -d com.apple.quarantine /Applications/PakePlus.app</code>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-12 text-center">
                <a href="https://pakeplus.com/" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300 inline-flex items-center">
                    <i class="fas fa-play-circle mr-2"></i> 立即开始
                </a>
            </div>
        </div>
    </section>

    <!-- Limitations -->
    <section class="py-16 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12">当前<span class="text-purple-600">限制</span></h2>
            
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-6 rounded-r-lg mb-8">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-yellow-500 text-xl"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-lg font-medium text-yellow-800">使用前请注意</h3>
                        <div class="mt-2 text-yellow-700">
                            <p>• 当前版本仅允许创建1个项目且每小时发布一次</p>
                            <p>• 不支持应用签名，macOS用户需手动处理"应用损坏"提示</p>
                            <p>• 高级功能或定价信息请参考官网最新公告</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center">
                <p class="text-gray-600 max-w-2xl mx-auto">PakePlus 仍在持续改进中，欢迎提交反馈和建议帮助我们做得更好！</p>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 平滑滚动效果
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>